<template>
  <div class="historyquery">
    <!-- 头部搜索部分 -->
    <el-row>
      <el-col :span="24">
        <dynForm
          :info-form="searchForm"
          :search-tags="searchTags"
          label-width="130px">
          <el-button
            type="primary"
            icon="el-icon-search"

            @click="doSearch"
          >
            {{ $t("search") }}</el-button
            >
        </dynForm>
      </el-col>
    </el-row>
    <!-- 主体部分 -->
    <el-card class="box-card" shadow="never">
      <!-- 表单部分 -->
      <el-row>
        <dynTable
          ref="dynTable"
          :loading="tableLoading"
          :table-data="tableData"
          :table-columns="tableColumns"
        />
      </el-row>
      <!--分页组件-->
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>
<script>
import crudJob from '@/api/Tooling/toolingLendAndReturnRecord'
import mySetting from '@/mixins/mySetting'
export default {
  name: 'ToolingLendPage',
  mixins: [mySetting],
  // 数据字典
  data() {
    return {
      tableLoading: true,
      searchForm: {},
      searchTags: [
        { label: this.$t('toolingBarcode'), prop: 'toolingBarcode', tag: 'DynInput' }
      ],
      tableColumns: Object.freeze(
        [
          { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
            return (
              <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
            )
          } },
          { prop: 'toolingBarcode', label: this.$t('toolingBarcode'), width: '120px' },
          { prop: '', label: this.$t('status'), templete: (_scope) => {
            return (
              <span>{_scope.row.actionType === 1 ? '领用' : '归还'}</span>
            )
          } },
          { prop: 'lendToId', label: this.$t('lendToId'), width: '120px' },
          { prop: 'lendId', label: this.$t('lendId'), width: '120px' },
          { prop: 'lendTime', label: this.$t('lendTime'), width: '160px' },
          { prop: 'returnId', label: this.$t('returnId'), width: '120px' },
          { prop: 'returnToId', label: this.$t('returnToId'), width: '120px' },
          { prop: 'returnTime', label: this.$t('returnTime'), width: '160px' },
          { prop: 'eqpId', label: this.$t('eqpName'), width: '120px' },
          { prop: 'lendTimes', label: this.$t('lendTimes'), width: '160px' },
          { prop: 'lendRemark', label: this.$t('lendRemark'), width: '120px' },
          { prop: 'returnTimes', label: this.$t('returnTimes'), width: '140px' },
          { prop: 'returnRemark', label: this.$t('returnRemark'), width: '120px' }
        ]
      )
    }
  },
  created() {
    this.initList()
  },
  methods: {
    // 切换分页
    getList(page) {
      this.tableLoading = true
      this.listQuery = page
      this.initList()
    },
    // 初始化列表
    initList() {
      crudJob.getList(this.$clearNull({ ...this.listQuery, ...this.searchForm })).then(res => {
        this.tableData = res.data
        this.total = res.total
        this.tableLoading = false
      })
    },
    // 点击查询
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/defaultStyle.scss";
</style>
